<template>
    <div class="piebox">
        <div class="title">
            {{ props.piedata.date }}年党员工作岗位占比
        </div>
      <div id="pie"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
const props = defineProps({
    piedata: Object,
});
const list = reactive({
  listdata: [
    {
      value: 30,
      name: "其他",
    },
    {
      value: 40,
      name: "技术类文档",
    },
    {
      value: 40,
      name: "图书资料目录",
    },
    {
      value: 45,
      name: "发文目录",
    },
    {
      value: 50,
      name: "户籍档案",
    },
    {
      value: 60,
      name: "专业（业务）档案",
    },
    {
      value: 70,
      name: "旧文书档案",
    },
    {
      value: 80,
      name: "收文目录",
    },
    {
      value: 90,
      name: "文书档案",
    },
  ],
});

watch(() => props.piedata, val => {
    let myChart = echarts.init(document.getElementById("pie"));
    list.listdata = props.piedata.data;
    drawecharts(myChart)
    window.onresize = function () {
        //自适应大小
        myChart.resize();
      };
});  
onMounted(() => {
//   console.log(props);
  let myChart = echarts.init(document.getElementById("pie"));
  drawecharts(myChart)


  onUnmounted(() => {
    if (myChart) {
      // console.log(myChart,"已经清空");
      myChart.clear();
      myChart.dispose();
      myChart = null;
    }
  });
});
const drawecharts = (myChart)=>{
  // 绘制图表
  myChart.setOption({
    // backgroundColor: '#f0ff0',
    color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
    grid: {
      left: 500,
      top: 50,
      bottom: 10,
      right: 10,
      containLabel: true,
    },
    polar: {},
    angleAxis: {
      interval: 1,
      type: "category",
      data: [],
      z: 10,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#0B4A6B",
          width: 1,
          type: "solid",
        },
      },
      axisLabel: {
        show: false,
        interval: 0,

        color: "#0B4A6B",
        margin: 8,
        fontSize: 14,
      },
    },
    radiusAxis: {
      min: 40,
      max: 120,
      interval: 20,
      axisLine: {
        show: false,
      },
      axisLabel: {
        formatter: "{value} %",
        show: false,
        padding: [0, 0, 20, 0],
        color: "#0B3E5E",
        fontSize: 16,
      },
      splitLine: {
        lineStyle: {
          color: "#F1F8FF",
          width: 2,
          type: "solid",
        },
      },
    },
    tooltip: {
    trigger: 'item'
  },
    calculable: true,
    series: [
      {
        type: "pie",
        radius: ["17%", "18%"],
        hoverAnimation: false,
        labelLine: {
          normal: {
            show: false,
            length: 10,
            length2: 10,
          },
        },
        label: {
        show: false,
        position: 'center'
      },
        data: [
          {
            name: "",
            value: 0,
            itemStyle: {
              normal: {
                color: "#B5CCE7",
              },
            },
            tooltip: {
              show: false,
            },
          },
        ],
      },
      {
        type: "pie",
        radius: ["70%", "62%"],
        hoverAnimation: false,
        labelLine: {
          normal: {
            show: false,
            length: 5,
            length2:5,
          },
        },
        name: "",
        label: {
        show: false,
        position: 'center'
      },
        data: [
          {
            name: "",
            value: 0,
            itemStyle: {
              normal: {
                color: "#F1F8FF",
              },
            },
            tooltip: {
              show: false,
            },
          },
        ],
      },
      {
        // stack: "a",
        type: "pie",
        radius: ["20%", "60%"],
        roseType: "area",
        zlevel: 10,
        label: {
          normal: {
            show: true,
            formatter: function (param) {
              // console.log(param)
              let style = "";
              switch (param.name) {
              }
              return (
                "{a|" +
                param.name +
                "}\n\n" +
                "{" +
                style +
                param.percent +
                "%}"
              );
            },
            textStyle: {
              fontSize: 14,
            },
            rich: {
              a: {
                color: "#666666",
                fontSize: "16",
              },
              s1: {
                color: "#F25646",
                fontSize: "16",
              },
              s2: {
                color: "#FA971E",
                fontSize: "16",
              },
              s3: {
                color: "#EDC644",
                fontSize: "16",
              },
              s4: {
                color: "#47B17D",
                fontSize: "16",
              },
              s5: {
                color: "#43C9D2",
                fontSize: "16",
              },
              s6: {
                color: "#4BCFFC",
                fontSize: "16",
              },
              s7: {
                color: "#0892E5",
                fontSize: "16",
              },
              s8: {
                color: "#0464DB",
                fontSize: "16",
              },
            },
            position: "outside",
          },
          emphasis: {
            show: true,
          },
        },
        emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
        itemStyle: {
          normal: {
            color: function (params) {
              const colorList = [
                {
                  c1: "#c5223b",
                  c2: "#fa768a",
                },
                {
                  c1: " #de7110",
                  c2: "#fecd70",
                },
                {
                  c1: "#d09f08",
                  c2: "#FFD145",
                },
                {
                  c1: "#238483",
                  c2: "#55C27C",
                },
                {
                  c1: " #45EAFF",
                  c2: "#40ADAC",
                },
                {
                  c1: "#12B3F8",
                  c2: "#7DE8FF",
                },
                {
                  c1: " #0176D3",
                  c2: "#13B7FF",
                },
                {
                  c1: "#015BD3",
                  c2: "#138DFF",
                },
                {
                  c1: " #7c94e7",
                  c2: "#1e2783",
                },
              ];
              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  offset: 0,
                  color: colorList[params.dataIndex].c1,
                },
                {
                  offset: 1,
                  color: colorList[params.dataIndex].c2,
                },
              ]);
            },
          },
        },
        labelLine: {
          normal: {
            show: true,
            length: 10,
            length2: 10,
            color: "#4BCFFC",
          },
          emphasis: {
            show: true,
          },
        },
        data:list.listdata
      },
    ],
  });
}
</script>

<style lang="scss" scoped>
.piebox{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title{
        align-items: center;
        // background-color: aqua;
font-size: 20px;
font-weight: 900;
    }
    #pie {
      width: 100%;
      height: 100%;
    }

}
</style>
